@page "/maps/label"

@using Syncfusion.Blazor.Maps
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
  <p>This sample visualizes the names of all the states in USA in data labels. Options have been provided to change the intersect action and smart labels mode of the data labels. </p>  
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render the data labels for each shape in a map. Data labels are used to display the values of the shapes. You can use the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html#Syncfusion_Blazor_Maps_MapsShapeSettings_Autofill'>AutoFill</a></code> property in the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeSettings.html'>MapsShapeSettings</a></code> to apply the default palette colors to the shapes. Tooltip is enabled in this example.</p>
   <p>More information about label can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/maps/data-labels'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-9 control-section sb-property-border">
    <SfMaps>
        <MapsZoomSettings Enable="false"/>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/usa.json"}' ShapePropertyPath='new string[] { "name"}' TValue="string">
                <MapsDataLabelSettings Visible="@DatalabelVisible" LabelPath="name" SmartLabelMode="@DatalabelSmartLabelMode" IntersectionAction="@DatalabelInterSectAction"/>
                <MapsShapeSettings Autofill="true"/>
                <MapsLayerTooltipSettings Visible="true" ValuePath="name"/>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width:100%" title="Properties">
                <tbody>
                    <tr style="height: 35px">
                        <td style="width: 70%" class="property-text">
                            Show Labels
                        </td>
                        <td style="width: 50%">
                            <SfCheckBox Checked="@CheckBoxvalue" ValueChange="Showlabel" TChecked="bool"/>
                        </td>
                    </tr>
                    <tr style="height: 35px">
                        <td style="width: 70%" class="property-text">
                            Smart label mode
                        </td>
                        <td style="width: 50%">
                            <SfDropDownList Placeholder="Select smartlabel mode" DataSource="@SmartLabelModeData" @bind-Value="@SmartLabelModeValue" Width="120px">
                                <DropDownListEvents TValue="string" TItem="SmartLabelValues" ValueChange="SmartLabelValueChange"/>
                                <DropDownListFieldSettings Text="Name" Value="Value"/>
                            </SfDropDownList>
                        </td>
                    </tr>
                    <tr style="height: 35px">
                        <td style="width: 70%" class="property-text">
                            Intersect action
                        </td>
                        <td style="width: 50%">
                            <SfDropDownList Placeholder="Select intersect action" DataSource="@IntersectactionData" @bind-Value="@IntersectActionDataValue" Width="120px">
                                <DropDownListEvents TValue="string" TItem="LabelIntersectValues" ValueChange="IntersectActionValueChange"/>
                                <DropDownListFieldSettings Text="Name" value="Value"/>
                            </SfDropDownList>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code {
    public bool DatalabelVisible = true;
    public bool CheckBoxvalue = true;
    public SmartLabelMode DatalabelSmartLabelMode = SmartLabelMode.Trim;
    public IntersectAction DatalabelInterSectAction = IntersectAction.None;
    public string SmartLabelModeValue = "Trim";
    public string IntersectActionDataValue = "None";
    public class LabelIntersectValues {
        public string Value { get; set; }
        public string Name { get; set; }
    };
    public List<LabelIntersectValues> IntersectactionData = new List<LabelIntersectValues> {
        new LabelIntersectValues { Value="None", Name="None" },
        new LabelIntersectValues { Value="Trim", Name="Trim" },
        new LabelIntersectValues { Value="Hide", Name="Hide" }
    };
    public class SmartLabelValues {
        public string Value { get; set; }
        public string Name { get; set; }
    };
    public List<SmartLabelValues> SmartLabelModeData = new List<SmartLabelValues> {
        new SmartLabelValues { Value="Trim", Name="Trim" },
        new SmartLabelValues { Value="None", Name="None" },
        new SmartLabelValues { Value="Hide", Name="Hide" }
    };
    public void Showlabel(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        CheckBoxvalue = args.Checked;
        DatalabelVisible = args.Checked;
    }
    public void SmartLabelValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, SmartLabelValues> args) {
        SmartLabelModeValue = args.Value;
        if (args.Value == "None") {
            DatalabelSmartLabelMode = SmartLabelMode.None;
        }
        else if (args.Value == "Hide") {
            DatalabelSmartLabelMode = SmartLabelMode.Hide;
        }
        else {
            DatalabelSmartLabelMode = SmartLabelMode.Trim;
        }
    }
    public void IntersectActionValueChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, LabelIntersectValues> args) {
        IntersectActionDataValue = args.Value;
        if (args.Value == "Trim") {
            DatalabelInterSectAction = IntersectAction.Trim;
        }
        else if (args.Value == "Hide") {
            DatalabelInterSectAction = IntersectAction.Hide;
        }
        else {
            DatalabelInterSectAction = IntersectAction.None;
        }
    }
}